<template>
	<view>
		<view class="bgImgWp">
			<image style="width: 100%;height: 100%; opacity: 0.9;"
				src="https://file.casugn.com/storecompcard/temp/名片背景-个人视角@2x_1680576512696.png">
			</image>
		</view>
		<u-status-bar></u-status-bar>
		<!-- 自定义导航 -->
		<u-navbar @leftClick="goBackHome" leftText="返回" title="预览首页" :bgColor="`rgba(103,107,133,${opacity||0})`"
			:titleStyle="{color:titleColor}">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="noticeTitle">
			当前正以名片访客的视角，预览您的名片
		</view>
		<view class="cardWp">
			<!-- 名片样式 -->
			<view class="card">
				<default-card :userInfo="userInfo" v-if="userInfo.style==0"></default-card>
				<card-style1 :userInfo="userInfo" v-else-if="userInfo.style==1"></card-style1>
				<card-style2 :userInfo="userInfo" v-else-if="userInfo.style==2"></card-style2>
				<card-style4 :userInfo="userInfo" v-else-if="userInfo.style==3"></card-style4>
				<card-style5 :userInfo="userInfo" v-else-if="userInfo.style==4">
				</card-style5>
				<default-card :userInfo="userInfo" bgStyle="2" v-else-if="userInfo.style==5"></default-card>
				<card-style6 :userInfo="userInfo" v-else-if="userInfo.style==6">
				</card-style6>
				<default-card :userInfo="userInfo" bgStyle="3" v-else-if="userInfo.style==7"></default-card>
				<!-- 默认名片 -->
				<default-card :userInfo="userInfo" v-else></default-card>
			</view>

			<!--导航栏 -->
			<view class="showGirdWp" :class="{'hide-button':shareing}">
				<view class="gridWp">
					<view class="u-grid-item" v-for="(item,i) in friendGirdList" :key="i" @click="handleOtherGridTap(item,i)">
						<view class="imgWp">
							<img :src="item.imgUrl" alt="">
						</view>
						<view class="text">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
			<!-- 功能按钮  -->
			<view class="mainBtnWp" :class="{'hide-button':shareing}">
				<view class="editBtnWp">
					<view class="editBtn">
						<u-button open-type="share" throttleTime="500" type="primary" :plain="true" color="#276AEE" shape="circle"
							text="分享名片">
						</u-button>
					</view>
				</view>
				<view class="editBtnWp">
					<view class="editBtn">
						<u-button @click="addFriend" throttleTime="500" type="primary" color="#276AEE" shape="circle"
							:hairline="true" text="添加好友"></u-button>
					</view>

				</view>

			</view>
			<view class="paddingBar">

			</view>
			<!-- tabs 切换功能 -->
			<view class="tabsWp">
				<u-tabs :current="currentIndex" @change="changeTabs" lineWidth="60rpx" lineHeight="4" :scrollable="false"
					:list="tabsList" lineColor="#276AEE" :activeStyle="{
								            color: '#276AEE',
								        }" :inactiveStyle="{
									        color: '#1D2129',
									    }" :itemStyle="`width:${750/tabsList.length}rpx;padding:0;font-size:28rpx;height:80rpx;fontWeight: 600;`">
				</u-tabs>
			</view>
			<!-- 简介 -->
			<view class="infoBlockListWp">
				<swiper-direct-com @scrollL="scrollL" @scrollR="scrollR">
					<!-- 内容区 -->
					<u-transition :show="currentIndex==0" mode="slide-left">
						<view class="infoBlockItemWp">
							<person-info :hasPersonInfo="hasPersonInfo" :introduction="introduction" :personImageList="myImageList"
								:personInfoTags="personInfoTags">
							</person-info>
						</view>
					</u-transition>
					<u-transition :show="currentIndex==1" mode="slide-left">
						<company-index v-if="companyData.companyId" :companyData="companyData"></company-index>
						<view style="min-height:400rpx" v-else>
							<nodata></nodata>
						</view>
					</u-transition>
					<u-transition :show="currentIndex==2" mode="slide-left">
						<productData v-if="productDataTitle.length>0" :titleList="productDataTitle"
							:productInfoList="productInfoList" :productVideo="productVideoObj.video" @onValueChange="onValueChange"
							@goToProductDetail="goToProductDetail">
						</productData>
						<nodata v-else nodataImgUrl="https://file.casugn.com/storecompcard/temp/空页面@2x(6)_1681114072965.png"
							nodataText="暂未设置产品信息"></nodata>
					</u-transition>
					<u-transition :show="currentIndex==3" mode="slide-left">
						<person-video-list ref="personVideoList" :openId="userInfo.openId" :cardId="userInfo.id"
							:currentOpenId="userInfo.openId"></person-video-list>
					</u-transition>
					<u-transition :show="currentIndex==4" mode="slide-left">
						<person-goods-list ref="personGoodsList" :openId="userInfo.openId" :cardId="userInfo.id"
							:unionId="userInfo.unionId"></person-goods-list>
					</u-transition>
				</swiper-direct-com>
			</view>
		</view>
		<!--弹窗 -->
		<u-popup :show="showGridListPopup" @close='handleGridListItemCancel' mode="bottom" :closeOnClickOverlay='true'>
			<view class="gridPopupWp">
				<view class="gridPopupListItem">
					{{ gridListPopupTitle ? gridListPopupTitle : '暂无信息' }}
				</view>
				<view class="gridPopupListItem text-b" @click="handleGridListItem(gridListPopupMain,gridListPopupTitle)">
					{{ gridListPopupMain }}
				</view>
				<view class="gridPopupListItem" @click="handleGridListItemCancel">
					取消
				</view>
			</view>
		</u-popup>
		<!-- 拨打电话 -->
		<u-popup :show="showCallPopup" @close='showCallPopup=false' mode="bottom" :closeOnClickOverlay='true'>
			<view class="gridPopupWp">
				<view class="gridPopupListItem text-b" v-if="userInfo.mobile" @click="handlePersonCall(userInfo.mobile)">
					{{ userInfo.mobile ? userInfo.mobile : '尚未设置' }}
				</view>
				<view class="gridPopupListItem text-b" v-if="userInfo.wechat" @click="handlePersonCall(userInfo.wechat)">
					{{ userInfo.wechat ? userInfo.wechat : '尚未设置' }}
				</view>
				<view class="gridPopupListItem" @click="showCallPopup=false">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import baseConfig from '@/config/baseUrl.js'
	import companyIndex from '@/components/companyIndex/companyIndex.vue'
	import productData from '@/pagesCard/components/productData/productData.vue'
	import personVideoList from '@/pagesCard/components/person-video-list/index.vue'
	import personGoodsList from '@/pagesCard/components/person-goods-list/index.vue'
	import swiperDirectCom from '@/components/swiper-direct-com/swiper-direct-com.vue'
	import defaultCard from '@/components/cardStyle/defaultCard.vue'
	import cardStyle1 from '@/components/cardStyle/cardStyle1.vue'
	import cardStyle2 from '@/components/cardStyle/cardStyle2.vue'
	import cardStyle4 from '@/components/cardStyle/cardStyle4.vue'
	import cardStyle5 from '@/components/cardStyle/cardStyle5.vue'
	import cardStyle6 from '@/components/cardStyle/cardStyle6.vue'
	import personInfo from '@/pagesCard/components/personInfo/personInfo.vue'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		friendGirdList
	} from '@/config/staticConfig.js'

	export default {
		components: {
			companyIndex,
			cardStyle1,
			cardStyle2,
			cardStyle4,
			cardStyle5,
			cardStyle6,
			defaultCard,
			personInfo,
			productData,
			personVideoList,
			personGoodsList,
			swiperDirectCom
		},
		data() {
			return {
				cardId: '', //个人名片id
				openId: '', //本人openId
				friendCardId: null, //他人分享的名片id
				friendOpenId: null, //他人分享的OpenId
				friendUnionId: null, //他人分享的UnionId
				showGridListPopup: false,
				gridListPopupTitle: '',
				gridListPopupMain: '',
				friendGirdList,
				photoList: null,
				qrCodeImgUrl: '', //生成的小程序码地址
				hotGoodsList: [],
				current: 0,
				showGrid: false,
				companyInfo: '',
				companyData: {},
				fromQuick: null,
				myImageList: [],
				introduction: '',
				personInfoTags: [],
				isFriend: null,
				tabsList: [],
				currentIndex: 2,
				hasPersonInfo: null,
				companyDataInfo: false,
				productDataTitle: [],
				productInfoList: [],
				productData: {},
				scrollTop: 0,
				titleColor: '#fff',
				navbarBgColor: 'rgba(103,107,133,0)',
				opacity: 0,
				showCallPopup: false,
				shareing: false,
				productVideoObj: {}
			};
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onPageScroll({
			scrollTop
		}) {
			this.scrollTop = scrollTop
			let opacity = (this.scrollTop / 50).toFixed(2)
			this.$set(this, 'opacity', opacity)
		},
		onLoad(opt) {
			console.log(opt, '预览界面');
			this.queryFunctionList()
			const {
				id: cardId,
				openId,
				unionId
			} = this.userInfo
			this.userInfo.id = cardId
			this.friendOpenId = openId
			this.friendUnionId = unionId
			if (cardId) {
				this.queryCardIntroductionById(this.userInfo.id)
				this.queryUserInfoByCardId()
				this.queryListByCategory()
				this.getProductDetail()
			}
		},
		watch: {
			currentIndex(val) {
				switch (val) {
					case 0:
						this.queryCardIntroductionById(this.userInfo.id)
						break;
					case 1:
						break;
					case 2:
						this.queryListByCategory()
						this.getProductDetail()
						break;
					case 3:
						this.$refs['personVideoList'].getVideoLists()
						break;
					case 4:
						this.$refs['personGoodsList'].getGoodsLists()
						break;
				}

			}
		},
		methods: {
			async getProductDetail() {
				let params = {
					companyId: this.userInfo.companyId || '',
				}
				let res = await this.$api.getProductVideoByCompanyId(params)
				if (res.success) {
					this.productVideoObj = res.result || {}
				}
			},
			scrollL() {
				// if (this.currentIndex == this.tabsList.length - 1) {
				// 	return
				// }
				// this.currentIndex++
			},
			scrollR() {
				// if (this.currentIndex == 0) {
				// 	return
				// }
				// this.currentIndex--

			},
			//获取功能列表
			async queryFunctionList() {
				let res = await this.$api.queryFunctionList()
				if (res.success) {
					res.result.forEach(item => {
						if (item.category == '好友名片tabs') {
							let arr = item.ebcFunctionList || []
							console.log(arr, '获取功能列表页面');
							this.tabsList = arr
						}

					})
				}
			},
			onValueChange({
				currentInd
			}) {
				this.productInfoList = this.productData[currentInd].infoList
			},
			//获取公司产品一级菜单
			async queryListByCategory() {
				let {
					companyId
				} = this.userInfo
				if (companyId) {
					let res = await this.$api.queryListByCategory({
						companyId: companyId ? companyId : ''
					})
					if (res.code == 200 && res.result) {
						this.productData = res.result || []
						if (this.productData && this.productData.length > 0) {
							this.productDataTitle = this.productData.map(item => {
								return item.category
							})
							this.productInfoList = this.productData[0].infoList || []
							console.log('获取产品列表', this.productInfoList)
						}

					} else {
						this.productDataTitle = []
						this.productData = []
						this.productInfoList = []
					}
				} else {
					this.productDataTitle = []
					this.productData = []
					this.productInfoList = []
				}

			},
			goBackHome() {
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}
			},
			//切换tabs
			changeTabs({
				index
			}) {
				this.currentIndex = index
				switch (index) {
					case 0:
						this.queryCardIntroductionById(this.userInfo.id)
						break;
					case 1:
						break;
					case 2:
						this.queryListByCategory()
						this.getProductDetail()
						break;
					case 3:
						this.$refs['personVideoList'].getVideoLists()
						break;
					case 4:
						this.$refs['personGoodsList'].getGoodsLists()
						break;
					default:
						break;
				}
			},
			async queryCardIntroductionById(cardId) {
				let res = await this.$api.queryCardIntroductionById({
					cardId
				})
				if (res.success && res.result) {
					this.id = res.result.id
					let myImageList = res.result.imageList || []
					if (myImageList.indexOf(',') == -1) {
						if (!myImageList || myImageList == '') {
							this.myImageList = []
						} else {
							let arr = []
							arr[0] = myImageList
							this.myImageList = arr
						}
					} else {
						this.myImageList = myImageList.split(',')
					}
					let bcCardLabelList = res.result.bcCardLabelList || []
					if (bcCardLabelList.length > 0) {
						this.personInfoTags = bcCardLabelList.filter(item =>
							item.isDel != 1)
					} else {
						this.personInfoTags = []
					}
					this.introduction = res.result.introduction || ''
					if (!this.personImageList && !this.introduction && !this.personInfoTags) {
						this.hasPersonInfo = false
					} else {
						this.hasPersonInfo = true
					}

				} else {
					this.hasPersonInfo = false
				}
			},
			// 返回主页创建名片
			goBackHomeAndCreateMyCard() {
				//二次确认
				uni.showModal({
					content: '是否去创建你的名片',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							//清除状态
							this.$store.commit('setIsSelf', true)
							uni.setStorageSync('sceneStatus', 1001)
							// 跳转创建
							uni.navigateTo({
								url: '/pagesCard/createCard/createCard'
							})

						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								icon: 'none'
							});
						}
					}
				});

			},
			//通过cardId 查询
			async queryUserInfoByCardId() {
				if (this.userInfo.id) {
					let res = await this.$api.queryCartById({
						id: this.userInfo.id
					})
					if (res.success) {
						//公司信息
						if (res.result.bcCompanyAbout == null) {
							this.companyData = {}
						} else {
							this.companyData = res.result.bcCompanyAbout || {}
							if (this.companyData.carousel && this.companyData.carousel.length > 0) {
								let arr = this.companyData.carousel.split(",")
								this.companyData.swiperList = arr.map(item => {
									let newItem = {
										url: item,
										filePath: item
									}
									return newItem
								})
							}
						}

					}
				}
			},
			//去好友产品展示页面
			goToProduct() {
				if (this.userInfo) {
					let userInfo = encodeURIComponent(JSON.stringify(this.userInfo))
					uni.navigateTo({
						url: `/pagesCard/friendProductPage/friendProductPage?otherUserInfo=${userInfo}`,
					})
					console.log('去好友产品展示页面');
				} else {
					uni.showToast({
						title: '未查询到好友信息',
						icon: 'none'
					});
				}
			},
			//添加好友
			async addFriend() {
				return uni.showToast({
					title: '不能添加自己为好友',
					icon: 'none'
				})
			},
			//收藏操作
			async changIsFavorite() {
				//收藏-1，取消收藏-0
				let res = await this.$api.updateCollect(this.userInfo.id, 1)
				if (res.success) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			showFullImg(i) {
				uni.previewImage({
					urls: this.myImageList,
					current: i,
				})
			},
			//导航
			goToGuest() {
				let plugin = requirePlugin('routePlan');
				const key = baseConfig.mapData.mapKey; //使用在腾讯位置服务申请的key
				const referer = baseConfig.mapData.appName //调用插件的app的名称
				let endPoint = this.userInfo.coord || ''
				if (endPoint.length < 1) {
					return uni.showToast({
						title: '用户未设置坐标信息',
						icon: 'none'
					});
				}
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			},
			goToMap() {
				console.log(JSON.parse(this.userInfo.coord), '导航信息');
				if (!this.userInfo.coord) {
					return uni.showToast({
						title: '用户没有设置公司地址',
						icon: 'none'
					});
				}
				let {
					latitude,
					longitude,
					name,
					address
				} = JSON.parse(this.userInfo.coord)
				if (latitude && longitude) {
					uni.openLocation({
						latitude: Number(latitude),
						longitude: Number(longitude),
						name: name ? name : '',
						address: address ? address : '',
						success: function() {
							console.log('success');
						}
					});
				} else {
					uni.showToast({
						title: '地址数据有误',
						icon: 'none'
					});
				}


			},
			//显示分享人的小程序码
			async showMyQrcode() {
				uni.showLoading({
					title: 'loading'
				})
				//发送到后台scene 生成指定小程序码图片
				if (!this.userInfo.id) {
					uni.hideLoading()
					uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
					return
				}
				let sceneCode = String(this.userInfo.id);
				let params = {
					scene: sceneCode,
					page: 'pagesCard/friendMainPage/friendMainPage',
					check_path: false
				}
				let res = await this.$api.getPhotoUrl(params)
				if (res.success) {
					this.qrCodeImgUrl = res.result
					// 跳转新页面携带参数
					uni.navigateTo({
						url: "/pagesCard/userQrCode/userQrCode?qrCodeImgUrl=" +
							encodeURIComponent(JSON.stringify(this.qrCodeImgUrl)) + '&openId=' + this
							.userInfo.openId,
					});
				} else {
					uni.showToast({
						title: '生成小程序码错误',
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			hiddenGridListPopup() {
				this.showGridListPopup = false
			},
			goToProductDetail(item) {
				uni.navigateTo({
					url: '/pagesCard/productDetail/productDetail?id=' + item.detail_id
				})
			},
			//分享人操作
			handleOtherGridTap(item, i) {
				switch (i) {
					//存储到通讯录
					case 0:
						let that = this

						// 读取 小程序已经授权的权限
						uni.getSetting({
							success(res) {
								// 判断是否拥有此权限进行拉起授权  和 重新授权功能
								if (!res.authSetting['scope.addPhoneContact']) {
									// 未授权此项权限 拉起授界面
									uni.authorize({
										scope: 'scope.addPhoneContact',
										success() {
											// 授权成功后 就可以执行 需要权限的  操作函数了
											uni.addPhoneContact({
												nickName: that.userInfo.name,
												firstName: that.userInfo.name,
												remark: '备注',
												mobilePhoneNumber: that.userInfo.mobile || "",
												weChatNumber: that.userInfo.wechat || "",
												organization: that.userInfo.company || "", //公司
												title: that.userInfo.position || "", //职位
												workPhoneNumber: that.userInfo
													.workPhoneNumber ? that.userInfo
													.workPhoneNumber : '', //工作电话
												email: that.userInfo.mail ? that
													.userInfo.mail : '',
												url: that.userInfo.url ? that.userInfo
													.url : '',
												addressCountry: that.userInfo
													.addressCountry ? that.userInfo
													.addressCountry : '', //国家
												addressState: that.userInfo
													.addressState ? that.userInfo
													.addressState : '', //省份
												addressCity: that.userInfo.addressCity ?
													that.userInfo.addressCity : '', //城市
												addressStreet: that.userInfo
													.addressStreet ? that.userInfo
													.addressStreet : '', //街道
												addressPostalCode: that.userInfo
													.addressPostalCode ? that.userInfo
													.addressPostalCode : '', //邮政编码
												success: function() {
													console.log('success');
												},
												fail: function() {
													console.log('fail');
													uni.showToast({
														title: '请授权以保存到通讯录',
														icon: 'none'
													});

												},
												cancel: function() {
													uni.showToast({
														title: '已取消',
														icon: 'none'
													});
												}
											});

										},
										fail(err) {
											/*
											 第一次拒绝授权后必须在 uni.authorize的fail中使用
											 uni.openSetting 才能进入设置界面打开授权按钮
											 */
											uni.showToast({
												title: '拒绝授权',
												icon: 'none'
											});
											// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
											uni.showModal({
												title: '是否重新授权',
												success(res) {
													if (res.confirm) {
														uni.openSetting({
															success() {
																console.log(
																	'开启权限成功');
															},
															fail() {
																console.log(
																	'开启权限失败');
															}
														});
													} else if (res.cancel) {
														console.log('拒绝开启开启权限');
													}
												}
											});
										}
									});
								} else {
									uni.addPhoneContact({
										nickName: that.userInfo.name,
										firstName: that.userInfo.name,
										remark: '备注',
										mobilePhoneNumber: that.userInfo.mobile || "",
										weChatNumber: that.userInfo.wechat || "",
										organization: that.userInfo.company || "", //公司
										title: that.userInfo.position || "", //职位
										workPhoneNumber: that.userInfo.workPhoneNumber ? that
											.userInfo.workPhoneNumber : '', //工作电话
										email: that.userInfo.mail ? that.userInfo.mail : '',
										url: that.userInfo.url ? that.userInfo.url : '',
										addressCountry: that.userInfo.addressCountry ? that
											.userInfo.addressCountry : '', //国家
										addressState: that.userInfo.addressState ? that
											.userInfo.addressState : '', //省份
										addressCity: that.userInfo.addressCity ? that.userInfo
											.addressCity : '', //城市
										addressStreet: that.userInfo.addressStreet ? that
											.userInfo.addressStreet : '', //街道
										addressPostalCode: that.userInfo.addressPostalCode ? that
											.userInfo
											.addressPostalCode : '', //邮政编码
										success: function() {
											console.log('success');
										},
										cancel: function() {
											uni.showToast({
												title: '已取消',
												icon: 'none'
											});
										}
									});
								}
							}
						});

						break;

					case 1:
						//打电话
						if (!this.userInfo.mobile && !this.userInfo.wechat) {
							return uni.showToast({
								title: '用户没有设置电话',
								icon: 'none'
							})
						}
						this.showCallPopup = true
						break;
					case 2:
						//邮箱地址
						if (!this.userInfo.mail) {
							return uni.showToast({
								title: '用户没有设置邮箱',
								icon: 'none'
							})
						}
						this.showGridListPopup = true
						this.gridListPopupTitle = this.userInfo.mail
						this.gridListPopupMain = '复制邮箱'
						break;
					case 3:
						console.log(item, '跳转导航页面')

						// this.goToGuest() //调用微信插件看路线
						//调用手机导航
						this.goToMap()
						break;
					case 4:
						wx.sendSms({
							phoneNumber: '',
							content: `尊敬的-客户姓名，您好。我是${this.userInfo.company ? this.userInfo.company : ''}${this.userInfo.position ? this.userInfo.position : ''}${this.userInfo.name ? this.userInfo.name : ''}，想去拜访贵司，特此预约。`,
						})
						break;
				}
			},
			handleGridListItemCancel() {
				this.showGridListPopup = false
				this.gridListPopupTitle = ''
				this.gridListPopupMain = ''
			},
			handlePersonCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: String(phoneNumber),
					success: () => {
						this.showCallPopup = false
					}
				});
			},
			handleGridListItem(text) {
				switch (text) {

					case '复制邮箱':
						if (!this.gridListPopupTitle || this.gridListPopupTitle == '暂无信息') {
							return uni.showToast({
								title: '未设置邮箱',
								icon: 'none'
							});
						} else {
							uni.setClipboardData({
								data: this.gridListPopupTitle,
								success: () => {
									this.showGridListPopup = false
								}
							});
							break;
						}

					case '复制微信号':
						uni.setClipboardData({
							data: this.gridListPopupTitle,
							success: () => {
								this.showGridListPopup = false
							}
						});
						break;
				}
			},

		},
		onShareAppMessage(res) {
			this.shareing = true
			setTimeout(() => {
				this.shareing = false
			}, 1000)

			if (!this.userInfo.id) {
				return uni.showToast({
					title: '未获得分享人',
					icon: 'none'
				});
			} else {
				return {
					title: `我的拜帖`,
					path: `/pagesCard/friendMainPage/friendMainPage?cardId=${this.userInfo.id}&openId=${this.userInfo.openId}&unionId=${this.userInfo.unionId}`
				}
			}


		},

	}
</script>

<style lang="scss">
	.bgImgWp {
		top: -10rpx;
		position: absolute;
		z-index: -1;
		width: 750rpx;
		height: 648rpx;

	}

	.noticeTitle {
		margin-top: 100rpx;
		height: 76rpx;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.30);
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 76rpx;
		padding-left: 30rpx;
	}

	.cardWp {
		margin-top: 30upx;

		.titleWp {
			background-color: #f8f9ff;
			height: 80upx;
			display: flex;
			align-items: center;
			overflow: hidden;
			// margin: 40upx 30upx;
			margin: 40upx 0;

			.colorBlock {
				background-color: #7b77fe;
				width: 20upx;
				height: 100%;
				margin-right: 20upx;
			}

			.mainTitle {
				font-weight: 600;
			}
		}

		.indexTabsWp {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 50rpx;


			.indexTab {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				color: #999;
				text-shadow: 1rpx 1rpx #eee;
				font-size: 35rpx;

			}

			.actived {
				color: $u-primary;
				border-bottom: 2px solid #015EEA;
			}
		}


		.gridWp {
			margin: 40rpx 0;
			display: flex;
			justify-content: space-between;

			.u-grid-item {
				text-align: center;
				flex: 1;

				.imgWp {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-bottom: 8upx;

					img {
						text-align: center;
						width: 80upx;
						height: 80upx;
					}
				}

				.text {
					height: 42rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 42rpx;

				}
			}
		}

		//编辑 名片 分享名片
		.mainBtnWp {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 136rpx;

			.editBtnWp {
				flex: 1;
				margin: 30rpx 15rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.editBtn {
					margin: 0 15rpx;
					flex: 1;
					height: 72rpx;

				}

			}

		}

		.paddingBar {
			width: 750rpx;
			height: 24rpx;
			background-color: #f7f8fa;
		}

		.infoBlockListWp {
			margin-top: 30rpx;
		}


		.hotGoodsWp {
			margin-bottom: 50rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.hotGoods {
				width: 100%;

				.hotGoodsItem {
					border: 1upx solid #eee;
					box-sizing: border-box;
					border-radius: 20upx;
					width: 49%;
					margin: 5upx 0;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 100upx;

					&:nth-child(2n) {
						margin-left: 10upx;
					}

					.left {
						width: 66upx;
						height: 66upx;
						margin: 20upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						margin-left: 40upx;
						font-size: 30upx;
						font-weight: 400;
						color: #333333;
					}
				}
			}


		}

		.video-scroll {
			height: 544rpx;
			margin-bottom: 8rpx;
			// background: #FFFFFF;

			.scroll-view-item_H {
				display: inline-block;
				width: 360rpx;
				height: 480rpx;
				// background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 32rpx;
				margin-left: 32rpx;

				img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;

			}
		}


	}


	//弹窗
	.gridPopupWp {
		// height: 300upx;

		.text-b {
			color: #276aee !important;
		}

		.gridPopupListItem {
			text-align: center;
			line-height: 100upx;
			height: 100upx;
			border-bottom: 1upx solid #eee;
			font-size: 32upx;
			font-weight: 300;
			color: #333333;
		}
	}

	.hide-button {
		visibility: hidden;
	}
</style>